<template>
 <div class="moduleBox">
  <div class="publishInfo" v-show="!isHide">
      <span class="leftinfo"></span>
      <div
        class="rightInfo"
        :style="{
          fontSize: $attrs.fontSizeModule,
          color: $attrs.backColorModule,
          fontWeight: $attrs.boldModule ? 'bold' : 'normal',
          fontStyle: $attrs.italicModule ? 'italic' : 'normal',
          textDecoration: $attrs.underlineModule ? 'underline' : 'none',
          textAlign: $attrs.textAlignModule,
          lineHeight: $attrs.lineHeightModule,
        }"
           >
        {{ title }}
      </div>
   </div>
   <div class="moduleCent">
     <div v-for="(item,index) in moduleList" :key="index" :class="['centInfo',$attrs.columnType==='signle'?'signleBox':'']" :style="{width:$attrs.columnType==='signle'?'100%':'calc(50% - 26px)',margin:$attrs.columnType=='double'?'10px':'0 10px 10px 10px'}" @click="btnImg(index,item)">
     <div v-if="item.backColorType===0" :class="['infoItem',$attrs.columnType==='signle'?'signleInfoItem':'']" :style="{background:'#ffffff url('+img+') no-repeat scroll center/100% 100%',height:item.height+'px',backgroundSize:'100% 100%',width:$attrs.columnType==='signle'?item.width+'px':'100%'}">
     </div>
     <div v-if="item.backColorType===0" class="itemText" :style="{color:item.backColor,fontSize:item.fontSize,fontWeight:item.bold ? 'bold' : 'normal',
    textDecoration:item.underline ? 'underline' : 'none',fontStyle:item.italic ? 'italic' : 'none'}">{{item.text}}</div>
     <div v-if="item.backColorType===1" :class="['infoItem',$attrs.columnType==='signle'?'signleInfoItem':'']" :style="{background:'transparent',height:item.height+'px',width:$attrs.columnType==='signle'?item.width+'px':'100%'}">
     </div>
     <div v-if="item.backColorType===1" class="itemText" :style="{color:item.backColor,fontSize:item.fontSize,fontWeight:item.bold ? 'bold' : 'normal',
    textDecoration:item.underline ? 'underline' : 'none',fontStyle:item.italic ? 'italic' : 'none'}">{{item.text}}</div>
     <div v-if="item.backColorType===2 && item.imgurl" :class="['infoItem',$attrs.columnType==='signle'?'signleInfoItem':'']" :style="{background:'#ffffff url('+item.imgurl+') no-repeat scroll center/100% 100%',height:item.height+'px',backgroundSize:'100% 100%',width:$attrs.columnType==='signle'?item.width+'px':'100%'}">
     </div>
     <div v-if="item.backColorType===2 && !item.imgurl" :class="['infoItem',$attrs.columnType==='signle'?'signleInfoItem':'']" :style="{background:item.background,height:item.height+'px',width:$attrs.columnType==='signle'?item.width+'px':'100%'}">
     </div>
     <div v-if="item.backColorType===2" class="itemText" :style="{color:item.backColor,fontSize:item.fontSize,fontWeight:item.bold ? 'bold' : 'normal',
    textDecoration:item.underline ? 'underline' : 'none',fontStyle:item.italic ? 'italic' : 'none'}">{{item.text}}</div>
     </div>
   </div>
 </div>
</template>
<script>
export default {
  props: {
   moduleList:{
    type:Array,
      default:function(){
        return [];
      }
   },
   title:{
    type:String,
      default:''
   },
   isHide:{
     type:Boolean,
      default:false
   } 
  },
  data() {
    return {
      img:require('@/assets/images/moren.jpeg')
    };
  },
  mounted() {
   
  },
  watch: {
 
  },
  methods: {
    btnImg(ind,item){
        this.$emit('input',ind);
        if(item.jumpType == 'function'){ //功能
        this.$emit('btnTurn', item.functionMenu,'function')
      }else if(item.jumpType == 'page'){ //页面
        this.$emit('btnTurn', item.jumpPath,'page')
      }
    }
  },
};
</script>

<style lang="scss" scoped>
  .moduleBox{
    .publishInfo{
    display:flex;
    flex-wrap: nowrap;
    margin:15px 10px;
    .leftinfo{
      width:3px;
      background:#1890FF;
      flex:none;
    }
    .rightInfo{
      flex:1;
      word-break: break-all;
      font-weight: bold;
      margin-left:6px;
      font-size: 16px;
    }
  }
  .moduleCent{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .centInfo{
        .infoItem{
            width:100%;
            background-size: 100% 100%;
            white-space: normal;
            border-radius: 8px;
        }
        .signleInfoItem{
          flex:none;
        }
        .itemText{
              width:100%;
              word-break: break-all;
           padding:0 10px;
           white-space: normal;
           margin-top:5px;
                font-size:14px;
            }
    }
    .signleBox{
      display:flex;
      flex-wrap: nowrap;
    }
  }
  }
</style>